<template>
  <div class="operation">
    <div ref="left" class="operation__left">
      <slot name="left"></slot>
    </div>
    <div ref="right" class="operation__right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script type="text/ECMAScript-6">
  /**
   * @author 白雨浓
   * @date 2018/5/9 18:08
   *
   * 顶部操作栏
   **/
  export default {
    name: 'Operation',
    data() {
      return {}
    },
    mounted() {
      this.$nextTick(() => {
      })
    },
    methods: {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .operation {
    display flex
    justify-content space-between
    align-items center
    margin auto
    padding 10px 0 0 0
  }

  .operation__left {
    display flex
    justify-content flex-start
    align-items center
    width 50%
  }

  .operation__right {
    display flex
    justify-content flex-end
    align-items center
    width 50%
  }
</style>
